<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150" height="150"></canvas>
    <script>
        function draw() {
            const canvasId = document.getElementById("mycanvas");
            if (canvasId.getContext) {
                const ctx = canvasId.getContext("2d");
                ctx.beginPath();
                // 逆时针
                ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
                ctx.moveTo(110, 75);
                // 顺时针
                ctx.arc(75, 75, 35, 0, Math.PI, false);
                ctx.moveTo(65, 65);
                // 左眼
                ctx.arc(60, 65, 5, 0, Math.PI*2, true);
                ctx.moveTo(95, 65);
                // 右眼
                ctx.arc(90, 65, 5, 0, Math.PI*2, true);
                ctx.stroke();
            }
        }
        // moveTo()的作用就是将路径列表清空，重新设置起点，不设置的话，会以上一次的绘制路径的重点为起点，路径之间会有连续的线，用了moveTo()重新设置起点之后，就不会有连续的线
    </script>
</body>
</html>